<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据更新检测</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>

    <div id="vm">
        <h2>数组更新检测</h2>

        <p>Vue包含一组观察数组的变异方法，所以它们也将会出发视图更新。push()、pop()、shift()、unshift()、splice()、sort()、reverse（）</p>

        <ol>
            <li v-for="item in items">{{item.name}} - {{item.age}}</li>
        </ol>

        <span v-for="n in 10">{{n}}</span>

        <h2>事件处理</h2>

        <button v-on:click="counter += 1">add 1</button>
        <p>The button above has been clicked {{counter}} times.</p>

        <button v-on:click="say('hi,一头牛totototo',$event)">say hi</button>

        <button v-on:click.once="doThis">阻止单击事件继续传播{{counter}}</button>


        <input v-on:keyup.enter="submit">


    </div>


    <script src="20180718-2.js"></script>
</body>
</html>